<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>商品列表</title>
    <link rel="stylesheet" href="/style/weui.css"/>
    <link rel="stylesheet" href="/style/swiper.min.css"/>
    <link rel="stylesheet" href="/style/example.css"/>
    <link rel="stylesheet" href="/style/jquery-weui.css">
    <link rel="stylesheet" href="/style/sweetalert.css"/>
    <style>
        .dianji:before { padding: 5px; margin: -5px; }
    </style>
</head>
<body ontouchstart>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <!-- header -->
            <div class="header">
                <div class="navbar-box">
                    <div class="left-btn"><i class="icon iconfont icon-left"></i></div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <?php if(isset($warehouse)) foreach ($warehouse as $key => $value) { ?>
                                <div name="warehouseId" class="swiper-slide <?= $key == 0 ? 'active' : ''; ?>"
                                     data-id="<?= $value['id'] ?>">
                                    <?= $value['warehouseName'] ?>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="right-btn"><i class="icon iconfont icon-right"></i></div>
                </div>
                <!--<div class="navbar-2-box" id="midBox"></div>-->
            </div>
            <!-- header end-->
            <div class="weui-tab__bd">
                <!--<div class="weui-tab__panel tab-left">
                    <div class="weui-cells" id="smallBox">
                    </div>
                </div>-->
                <div class="weui-tab__panel" style="padding-top: 45px;">
                    <!-- list -->
                    <div class="weui-panel weui-panel_access weui-tab__bd-item infinite" style="display: block; position: initial">
                        <div class="weui-panel__bd content-padded" id="productBox">
                        </div>
                        <div class="weui-loadmore">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                    </div>
                    <!-- list end-->
                </div>
            </div>
            <!-- tabbar -->
            <div class="weui-tabbar">
                <a href="/" class="weui-tabbar__item">
                    <span class="weui-tabbar__icon"><i class="icon iconfont icon-home"></i></span>
                    <p class="weui-tabbar__label">首页</p>
                </a>
                <a href="/product" class="weui-tabbar__item weui-bar__item_on">
                    <span class="weui-tabbar__icon"><i class="icon iconfont icon-commodity"></i></span>
                    <p class="weui-tabbar__label">商品</p>
                </a>
                <a href="/cart" class="weui-tabbar__item">
                    <span class="weui-tabbar__icon"><i class="icon iconfont icon-buy"></i></span>
                    <p class="weui-tabbar__label">购物车</p>
                </a>
                <a href="/order/list" class="weui-tabbar__item">
                    <span class="weui-tabbar__icon"><i class="icon iconfont icon-my"></i></span>
                    <p class="weui-tabbar__label">我的订单</p>
                </a>
            </div>
            <!-- tabbar end-->
        </div>
    </div>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script src="/js/swiper.min.js"></script><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="/js/swiper.min.js"></script>
<script src="/js/jquery-weui.js"></script>
<script>
    var loadFlg = true;
    var dataFlg = true;
    var page = 0;//模拟下拉更新次数

    //一级菜单位置记录
    $(".navbar-box .swiper-slide.active").each(function () {
        var selfWidth = $(this)[0].offsetLeft + $(this)[0].clientWidth;
        if (selfWidth - screen.width > 0) {
            $(this).parent().css({transform: 'translate3d(' + ((screen.width - selfWidth) - 40) + 'px, 0px, 0px)'})
            //40,去掉两边按钮尺寸
        }
    });

    $(".infinite").infinite().on('infinite', function() {
        if(loadFlg && dataFlg) {
            var self = this;
            if(self.loading) return;
            self.loading = true;
            $('.weui-loadmore').show();
            $(".weui-loadmore__tips").text('正在加载');
            setTimeout(function() {
                loadProduct();
                self.loading = false;
            }, 1000);   //模拟延迟
        }
    });

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 0,
        freeMode: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

    //******************************************************************************************************************

    $(function () {
        loadProduct();
        //修改商品数量
        $(document).on('blur','input[name=amount]', function () {
            var materielId = $(this).attr("data-id");
            var amount = $(this).val();
            if (!amount || !$.isNumeric(amount) || amount < 0) {
                swal('请输入正确的数量');
                $(this).focus();
                return;
            }
            $.post(
                '/cart/add-cart',
                {'list': [{'materielId': materielId, 'amount': amount, editFlg: 1}]},
                function (o) {},
                'json'
            );
        })
    });

    //点击一级别类别
    $("div[name=warehouseId]").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
        if(loadFlg) {
            page = 0;
            dataFlg = true;
            $('#productBox').empty();
            $('.weui-loadmore').show();
            $(".weui-loadmore__tips").text('正在加载');
            loadProduct();
        }
    });

    function loadProduct() {
        var warehouseId = $('div[name=warehouseId].active').attr('data-id');
        $.post(
            '/product/get-product',
            {
                'warehouseId': warehouseId,
                'page': page
            },
            function (o) {
                if (o.code == 200) {
                    console.log(o.data);
                    var html = '';
                    page++;
                    $.each(o.data.materiels, function (i, v) {
                        html += '<div class="weui-media-box weui-media-box_appmsg" style="padding: 10px 15px">';
                        html += '   <div class="weui-media-box__hd">';
                        html += '       <a href="#">';
                        if (v['saleFlg'] == 0) {
                            html += '       <div class="sold_out"><p><b>售罄</b><samp>SOLD OUT</samp></p></div>';
                        }
                        html += '           <img class="weui-media-box__thumb" src="' + v['img'] + '" alt="">';
                        html += '       </a>';
                        html += '   </div>';
                        html += '   <div class="weui-media-box__bd">';
                        html += '       <a href="#" class="weui-media-box__title">' + v['materielName'] + '</a>';
                        html += '       <p class="weui-media-box__desc"><span class="text-red">' + v['specDesc'] + '</span></p>';
                        html += '       <p class="weui-media-box__desc" style="line-height: 1">' + v['orderUnit'] + '</p>';
                        if(o.data.shopType==1){
                            html += '       <p class="weui-media-box__desc" style="line-height: 1">售价:' + v['salePrice'] + '</p>';
                        }
                        if (v['saleFlg'] == 1) {
                            html += '   <div class="weui-cell__ft add-box" style="float: right; margin-top: -35px">';
                            html += '       <i class="icon iconfont icon-add dianji" data="+1" data-id="' + v['materielId'] + '"></i>';
                            html += '       <input type="text" name="amount" class="weui-input" style="width:35px" value=' + v['amount'] + ' data-id="' + v['materielId'] + '" >';
                            html += '       <i class="icon iconfont icon-reduce dianji" data="-1" data-id="' + v['materielId'] + '"></i>';
                            html += '   </div>';
                        }
                        html += '   </div>';
                        html += '</div>'
                    });
                }
                $('#productBox').append(html);

                if (o.code == 200 && o.data.length < 20) {
                    dataFlg = false;
                    $(".weui-loadmore__tips").text('没数据了')
                }
                loadFlg = true;
                $('.weui-loadmore').hide();
            },
            'json'
        );
    }

    //加入购物车 --点击显示减少
    $(document).on("click", ".add-box i", function () {
        var _this = this;
        var data = parseInt($(this).attr("data")),
            val = parseInt($(this).siblings("input").val());
        var materielId = $(this).attr("data-id");
        var amount = data;
        if (val + data === 0) {
            amount = 0;
        }
        $.post(
            '/cart/add-cart',
            {'list': [{'materielId': materielId, 'amount': amount}]},
            function (o) {
                if (o.code == 200) {
                    $(_this).siblings("input").val(val + data);
                    if (val + data === 0) {
                        $(_this).siblings("input").hide();
                        $(_this).hide();
                    } else {
                        $(_this).siblings("input").show();
                        $(_this).siblings(".icon-reduce").show();
                    }
                }
            },
            'json'
        );
    });
</script>
</body>
</html>
